<!DOCTYPE html>
<html lang="en">
<!-- 兼容IE -->
<!-- <script src="./js/polyfill.min.js"></script>
<script src="./js/babel.min.js"></script> -->
<script src="./js/konva.min.js"></script>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script src="./js/vue-local.js"></script>
<script src="./layui/layui.js"></script>
<link rel="stylesheet" href="./css/astrolabe.css">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>

    <!-- 星图  -->
    <!-- 兼容IE -->
    <!-- <script type="text/babel"> -->
    <script>
        var planetColor = null
        var stage = new Konva.Stage({
            container: "box",
            width: window.innerWidth,
            height: window.innerHeight
        });

        //定义变量
        var cx = window.innerWidth / 2;
        var cy = window.innerHeight / 2;
        var bigRadius = 240;
        var middleRadius = 160;
        var centerRadius = 80;


        //创建轨道与恒星层
        var bgLayer = new Konva.Layer();
        stage.add(bgLayer);


        //轨道
        var bigCircle = new Konva.Circle({
            x: cx,
            y: cy,
            radius: bigRadius,
            stroke: "#fff",
            dash: [10, 2]
        });
        bgLayer.add(bigCircle);


        //恒星
        var centerCircle = new CircleText({
            x: cx,
            y: cy,
            innerRadius: centerRadius,
            innerFill: "#ffaf00",
            text: "S-211",
            fontSize: 18,
            fontWeight: "bold",
            fontFill: "#fff",
            fontX: -25,
            fontY: -9

        });
        bgLayer.add(centerCircle);
        bgLayer.draw();

        //创建行星层
        var starLayer = new Konva.Layer();
        stage.add(starLayer);

        //最外圈的小球
        var bigCircleData = [
            {
                innerRadius: 40,
                innerFill: "#5cb85c",
                text: "B-118",
                fontSize: 12,
                fontX: -15,
                fontY: -7,
                opacity: .7
            },
            {
                innerRadius: 40,
                innerFill: "#5bc0de",
                text: "Atlas",
                fontSize: 12,
                fontX: -15,
                fontY: -7,
                opacity: .7
            },
            {
                innerRadius: 40,
                innerFill: "#f0ad4e",
                text: "Red Rock",
                fontSize: 12,
                fontX: -25,
                fontY: -7,
                opacity: .7
            },
            {
                innerRadius: 40,
                innerFill: "#d9534f",
                text: "Augstom",
                fontSize: 12,
                fontX: -25,
                fontY: -7,
                opacity: .7
            },
            {
                innerRadius: 40,
                innerFill: "#428bca",
                text: "shakurus",
                fontSize: 12,
                fontX: -25,
                fontY: -7,
                opacity: .7
            }
        ];


        //创建一个组
        var bigCircleGroup = new Konva.Group({
            x: cx,
            y: cy
        });
        starLayer.add(bigCircleGroup); //把组添加到层中


        var angle = 0;
        var angleDiff = 360 / bigCircleData.length;

        bigCircleData.forEach(function (option, index) {

            option.x = Math.cos(angle / 180 * Math.PI) * bigRadius;
            option.y = Math.sin(angle / 180 * Math.PI) * bigRadius;
            var circleText = new CircleText(option);
            bigCircleGroup.add(circleText); //添加到组中
            angle += angleDiff;
        });
        starLayer.draw();


        var angleSpeed = 10; //每秒钟转的角度
        var animation = new Konva.Animation(function (frame) {
            var angleDiff = angleSpeed * frame.timeDiff / 1000;
            //外圈转动
            bigCircleGroup.rotate(angleDiff);
            bigCircleGroup.getChildren().each(function (item, index) {
                item.rotate(-angleDiff);
            })
        }, starLayer);
        animation.start();

        //鼠标进入
        bigCircleGroup.on("mouseenter", function () {
            angleSpeed = 4;
            document.body.style.cursor = "pointer";
        }).on("mouseleave touchend", function () {
            angleSpeed = 10;
            document.body.style.cursor = "default";
        })

        /**
         * 生成带文字的圆
        */
        function CircleText(options) {
            //配置项
            options = options || {};
            options.x = options.x || 0;
            options.y = options.y || 0;
            options.innerRadius = options.innerRadius || 0;
            options.innerFill = options.innerFill || "red";
            options.text = options.text || "Lenno";
            options.fontFill = options.fontFill || "#fff";
            options.fontSize = options.fontSize || 16;
            options.fontWeight = options.fontWeight || "normal";
            options.fontFamily = options.fontFamily || "MicrosoftYaHei";
            options.fontX = options.fontX || 0;
            options.fontY = options.fontY || 0;
            options.opacity = options.opacity || 1;

            //创建组
            var group = new Konva.Group({
                x: options.x,
                y: options.y
            })

            //圆
            var circle = new Konva.Circle({
                x: 0,
                y: 0,
                radius: options.innerRadius,
                fill: options.innerFill,
                name: options.text
            });

            // 点击事件
            circle.on("click", (e) => {
                console.log("!")
                planetColor = e.currentTarget.getAttr('fill')
                let planetName = e.currentTarget.getAttr('name')
                localStorage.setItem("currentPlanet",planetName)
                //iframe弹窗
                layui.use('layer', function () {
                    var layer = layui.layer;
                    var index = layer.open({
                        type: 2,
                        skin: "my-skin",
                        title: planetName,
                        closeBtn: 1,
                        area: ['95%', '95%'],
                        anim: 0,
                        content: ['./planetInfo.html', 'no'], //iframe的url，no代表不显示滚动条
                    });
                    document.querySelector("body .my-skin .layui-layer-title").style.background = planetColor
                });
            })
            group.add(circle);
            //文字
            var text = new Konva.Text({
                x: options.fontX,
                y: options.fontY,
                text: options.text,
                fill: options.fontFill,
                fontSize: options.fontSize,
                fontFamily: options.fontFamily,
                fontWeight: options.fontWeight
            });

            text.on("click", () => {
                circle.fire("click")
            })
            group.add(text);
            return group;
        }

        // 响应式
        function resizeStage() {
            stage.width(window.innerWidth);
            stage.height(window.innerHeight);
            stage.draw();
        }

        // adapt the stage on any window resize
        window.addEventListener('resize', resizeStage);
    </script>
</body>

</html>